<template>
	<view class="class_box">
		<view class="h2">班级信息</view>
		<view class="form_class">
			<view class="form_li">
				<text>班级名称</text>
				<view class="p">{{classData.name}}</view>
			</view>
			<view class="form_li">
				<text>班级人数</text>
				<view class="p">{{classData.per_num}}人</view>
			</view>
			<view class="form_li">
				<text>备注</text>
				<view class="p">{{classData.descript}}</view>
			</view>
			<view class="join_btn" @click="onJoin()">加入班级</view>
		</view>
		<login ref="login" v-on:succ="ajax"></login>

		<view class="mask" v-if="isMaskShow">
			<view class="cu-form-mask">
				<view class="h2 mask-h2">完善个人信息</view>
				<view class="cu-form-box">
					<view class="cu-form-group">
						<view class="title">姓名</view>
						<input placeholder="请输入姓名" v-model="formData.username"></input>
					</view>
					<view class="cu-form-group">
						<view class="title">身份证</view>
						<input placeholder="请输入身份证" v-model="formData.no"></input>
					</view>
					<view class="cu-form-group">
						<view class="title">手机</view>
						<input placeholder="请输入手机号码" v-model="formData.mobile"></input>
					</view>
				</view>
				<view class="join_btn" @click="onJoin()">提交信息</view>

			</view>
		</view>
	</view>
</template>

<script>
	import userApi from "@/common/api/user.js"
	export default {
		data() {
			return {
				isLogin: false,
				user: '',
				isMaskShow: false,
				classData: {},
				formData: {
					username: '',
					no: '',
					mobile: ''
				}
			}
		},
		onShow() {
			uni.$on('login_success', (data) => {
				console.log('login_success', data)
				this.ajax()
			})
			this.ajax()
			if (uni.getStorageSync('token')) {
				this.isLogin = true
			} else {

				this.$nextTick(() => {
					console.log(this.$refs.login)
					this.$refs.login.modal = true;
				})

			}
		},
		onLoad(option) {
			console.log(option)
			this.getSchoolId(option.c);
		},
		methods: {
			getSchoolId(id) {
				var that = this;
				this.http('school/auth', {school_id:id}, 'post').then(res => {
					if (!res.code) {
						uni.showToast({
							title: '获取数据失败，请刷新重试',
							icon: 'error'
						})
						return
					}
					that.formData = res.data.user;
					that.classData = res.data.school;
				})
			},
			onJoin() {
				this.isMaskShow = true
			},
			ajax() {
				if (uni.getStorageSync('token')) {
					userApi.getUserInfo(this).then(res => {
						if (res.code == 1) {
							this.user = res.data
							uni.setStorageSync('user', res.data)
						} else {
							uni.$emit('uniLogin')
						}
					})
				} else {
					uni.$emit('uniLogin')
				}

				// setTimeout(() => {
				// 	this.user = uni.getStorageSync('user')
				// 	console.log('user', this.user)
				// }, 500)
			},
		}
	}
</script>

<style>
	input {
		text-align: right;
	}

	.class_box {
		text-align: center;
		margin: 60rpx 30rpx;
		padding: 50rpx 30rpx;
		background-color: #fff;
		border-radius: 8px;
		height: 90vh;
		position: relative;
	}

	.h2 {
		font-size: 39rpx;
		color: #333;
		font-weight: bold;
	}

	.form_class {
		padding: 20rpx 15rpx;
		background-color: #fff;
		margin-top: 30rpx;
		border-radius: 8px;
	}

	.form_li {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 25rpx 0;
		border-bottom: solid 1px #eee;
	}

	.form_li text {
		display: block;
		font-size: 28rpx;
		color: #000;
	}

	.form_li .p {
		font-size: 28rpx;
		color: #666;
	}

	.join_btn {
		width: calc(100% - 50rpx);
		height: 75rpx;
		background: #396EFF;
		border-radius: 22px;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		position: absolute;
		bottom: 50rpx;
		left: 50%;
		transform: translateX(-50%);
		box-sizing: border-box;
	}

	.mask {
		position: fixed;
		width: 100%;
		height: 100%;
		z-index: 100;
		top: 0;
		left: 0;
		background-color: rgba(0, 0, 0, .5);
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.cu-form-mask {
		background-color: #fff;
		border-radius: 20rpx;
		width: 90%;
		padding: 40rpx;
		box-sizing: border-box;
	}

	.cu-form-box {
		min-height: 500rpx;
	}

	.cu-form-group {
		padding-left: 10rpx;
		padding-right: 0;
	}

	.cu-form-group {
		border-top: none !important;
		border-bottom: solid 1px #eee;
	}

	.mask-h2 {
		margin-bottom: 40rpx;
	}

	.mask .join_btn {
		position: static;
		transform: none;
		width: 400rpx;
		margin: 80rpx auto;
	}
</style>